<template>
    <form>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" v-model="loginForm.username" autocomplete="off">
        <br>
        <br>
        <label for="password">
            Password:
        </label>
        <input type="password" id="password" name="password" v-model="loginForm.password" autocomplete="off">
        <br>
        <br>
        <input type="submit" value="Submit" @click="validate">
    </form>
</template>

<script>
export default {
  name: 'App',
    data() {
        return {
            loginForm: {
                username:'',
                password:''
            },
        }
    },
    methods: {
        validate() {
            if (this.loginForm.username == "zs" && this.loginForm.password == "123") {
                alert('登录成功');
            } else {
                alert("账号或密码错误");
            }
        }
    },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
